<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>angular-oauth2-oidc</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="icon" type="image/x-icon" href="../images/favicon.ico">
	      <link rel="stylesheet" href="../styles/style.css">
    </head>
    <body>

        <div class="navbar navbar-default navbar-fixed-top visible-xs">
            <a href="../" class="navbar-brand">angular-oauth2-oidc</a>
            <button type="button" class="btn btn-default btn-menu fa fa-bars" id="btn-menu"></button>
        </div>

        <div class="xs-menu menu" id="mobile-menu">
            <div id="book-search-input" role="search">
    <input type="text" placeholder="Type to search">
</div>
            <nav>

    <ul class="list">

        <li class="title">
            <a href="index.html" data-type="index-link">angular-oauth2-oidc</a>
        </li>

        <li class="divider"></li>


        <li class="chapter">
            <a data-type="chapter-link" href="index.html"><span class="fa fa-home"></span>Getting started</a>
            <ul class="links">
                    <li class="link">
                        <a 
                            
                             href="overview.html" 
                             href="overview.html" 
                            data-type="chapter-link">
                            <span class="fa fa-fw fa-th"></span>Overview
                        </a>
                    </li>
                    <li class="link">
                      <a href="index.html" data-type="chapter-link"><span class="fa fa-file-text-o"></span>README</a>
                    </li>
                    <li class="link">
                            <a href="changelog.html"
                        data-type="chapter-link">
                            <span class="fa fa-fw fa-file-text-o"></span>CHANGELOG
                        </a>
                    </li>
                    <li class="link">
                        <a href="dependencies.html"
                            data-type="chapter-link">
                            <span class="fa fa-fw fa-list"></span>Dependencies
                        </a>
                    </li>
            </ul>
        </li>

        <li class="chapter">
            <div class="simple menu-toggler" data-toggle="collapse"
                    data-target="#xs-additional-pages"
                >
                <span class="fa fa-fw fa-book"></span>
                <span>Additional documentation</span>
                <span class="fa fa-angle-down"></span>
            </div>
            <ul class="links collapse"
                    id="xs-additional-pages"
                >
                    <li class="link ">
                        <a href="additional-documentation/getting-started.html" data-type="entity-link" data-context-id="additional">Getting Started</a>
                    </li>
                    <li class="link ">
                        <a href="additional-documentation/preserving-state-(like-the-requested-url).html" data-type="entity-link" data-context-id="additional">Preserving State (like the Requested URL)</a>
                    </li>
                    <li class="link ">
                        <a href="additional-documentation/refreshing-a-token-(silent-refresh).html" data-type="entity-link" data-context-id="additional">Refreshing a Token (Silent Refresh)</a>
                    </li>
                    <li class="link ">
                        <a href="additional-documentation/working-with-httpinterceptors.html" data-type="entity-link" data-context-id="additional">Working with HttpInterceptors</a>
                    </li>
                    <li class="link ">
                        <a href="additional-documentation/callback-after-login.html" data-type="entity-link" data-context-id="additional">Callback after login</a>
                    </li>
                    <li class="link ">
                        <a href="additional-documentation/custom-query-parameters.html" data-type="entity-link" data-context-id="additional">Custom Query Parameters</a>
                    </li>
                    <li class="link ">
                        <a href="additional-documentation/events.html" data-type="entity-link" data-context-id="additional">Events</a>
                    </li>
                    <li class="link ">
                        <a href="additional-documentation/routing-with-the-hashstrategy.html" data-type="entity-link" data-context-id="additional">Routing with the HashStrategy</a>
                    </li>
                    <li class="link ">
                        <a href="additional-documentation/adapt-id_token-validation.html" data-type="entity-link" data-context-id="additional">Adapt id_token Validation</a>
                    </li>
                    <li class="link ">
                        <a href="additional-documentation/session-checks.html" data-type="entity-link" data-context-id="additional">Session Checks</a>
                    </li>
                    <li class="link ">
                        <a href="additional-documentation/server-side-rendering.html" data-type="entity-link" data-context-id="additional">Server Side Rendering</a>
                    </li>
                    <li class="link ">
                        <a href="additional-documentation/configure-library-for-implicit-flow-without-discovery-document.html" data-type="entity-link" data-context-id="additional">Configure Library for Implicit Flow without discovery document</a>
                    </li>
                    <li class="link ">
                        <a href="additional-documentation/using-systemjs.html" data-type="entity-link" data-context-id="additional">Using SystemJS</a>
                    </li>
                    <li class="link ">
                        <a href="additional-documentation/original-config-api.html" data-type="entity-link" data-context-id="additional">Original Config API</a>
                    </li>
                    <li class="link ">
                        <a href="additional-documentation/using-password-flow.html" data-type="entity-link" data-context-id="additional">Using Password Flow</a>
                    </li>
            </ul>
        </li>

        <li class="chapter modules">
            <a data-type="chapter-link" href="modules.html">
                <div class="menu-toggler linked" data-toggle="collapse"
                        data-target="#xs-modules-links"
                >
                    <span class="fa fa-fw fa-archive"></span>
                    <span class="link-name">Modules</span>
                    <span class="fa fa-angle-down"></span>
                </div>
            </a>
            <ul class="links collapse"
                    id="xs-modules-links"
                >
                    <li class="link">
                        <a href="modules/OAuthModule.html" data-type="entity-link">OAuthModule</a>
                    </li>
            </ul>
        </li>



        <li class="chapter">
            <div class="simple menu-toggler" data-toggle="collapse"
                    data-target="#xs-classes-links"
                >
                <span class="fa fa-fw fa-file-code-o"></span>
                <span>Classes</span>
                <span class="fa fa-angle-down"></span>
            </div>
            <ul class="links collapse"
                    id="xs-classes-links"
                >
                    <li class="link">
                        <a href="classes/AbstractValidationHandler.html" data-type="entity-link">AbstractValidationHandler</a>
                    </li>
                    <li class="link">
                        <a href="classes/AuthConfig.html" data-type="entity-link">AuthConfig</a>
                    </li>
                    <li class="link">
                        <a href="classes/JwksValidationHandler.html" data-type="entity-link">JwksValidationHandler</a>
                    </li>
                    <li class="link">
                        <a href="classes/LoginOptions.html" data-type="entity-link">LoginOptions</a>
                    </li>
                    <li class="link">
                        <a href="classes/NullValidationHandler.html" data-type="entity-link">NullValidationHandler</a>
                    </li>
                    <li class="link">
                        <a href="classes/OAuthErrorEvent.html" data-type="entity-link">OAuthErrorEvent</a>
                    </li>
                    <li class="link">
                        <a href="classes/OAuthEvent.html" data-type="entity-link">OAuthEvent</a>
                    </li>
                    <li class="link">
                        <a href="classes/OAuthInfoEvent.html" data-type="entity-link">OAuthInfoEvent</a>
                    </li>
                    <li class="link">
                        <a href="classes/OAuthModuleConfig.html" data-type="entity-link">OAuthModuleConfig</a>
                    </li>
                    <li class="link">
                        <a href="classes/OAuthNoopResourceServerErrorHandler.html" data-type="entity-link">OAuthNoopResourceServerErrorHandler</a>
                    </li>
                    <li class="link">
                        <a href="classes/OAuthResourceServerConfig.html" data-type="entity-link">OAuthResourceServerConfig</a>
                    </li>
                    <li class="link">
                        <a href="classes/OAuthResourceServerErrorHandler.html" data-type="entity-link">OAuthResourceServerErrorHandler</a>
                    </li>
                    <li class="link">
                        <a href="classes/OAuthStorage.html" data-type="entity-link">OAuthStorage</a>
                    </li>
                    <li class="link">
                        <a href="classes/OAuthSuccessEvent.html" data-type="entity-link">OAuthSuccessEvent</a>
                    </li>
                    <li class="link">
                        <a href="classes/ReceivedTokens.html" data-type="entity-link">ReceivedTokens</a>
                    </li>
                    <li class="link">
                        <a href="classes/ValidationHandler.html" data-type="entity-link">ValidationHandler</a>
                    </li>
                    <li class="link">
                        <a href="classes/WebHttpUrlEncodingCodec.html" data-type="entity-link">WebHttpUrlEncodingCodec</a>
                    </li>
            </ul>
        </li>

                <li class="chapter">
                    <div class="simple menu-toggler" data-toggle="collapse"
                            data-target="#xs-injectables-links"
                        >
                        <span class="fa fa-fw fa-long-arrow-down"></span>
                        <span>Injectables</span>
                        <span class="fa fa-angle-down"></span>
                    </div>
                    <ul class="links collapse"
                            id="xs-injectables-links"
                        >
                            <li class="link">
                                <a href="injectables/OAuthService.html" data-type="entity-link">OAuthService</a>
                            </li>
                            <li class="link">
                                <a href="injectables/UrlHelperService.html" data-type="entity-link">UrlHelperService</a>
                            </li>
                    </ul>
                </li>

        <li class="chapter">
            <div class="simple menu-toggler" data-toggle="collapse"
                    data-target="#xs-interceptors-links"
                >
                <span class="fa fa-fw fa-exchange"></span>
                <span>Interceptors</span>
                <span class="fa fa-angle-down"></span>
            </div>
            <ul class="links collapse"
                    id="xs-interceptors-links"
                >
                    <li class="link">
                        <a href="interceptors/DefaultOAuthInterceptor.html" data-type="entity-link">DefaultOAuthInterceptor</a>
                    </li>
            </ul>
        </li>

        <li class="chapter">
            <div class="simple menu-toggler" data-toggle="collapse"
                    data-target="#xs-interfaces-links"
                >
                <span class="fa fa-fw fa-info"></span>
                <span>Interfaces</span>
                <span class="fa fa-angle-down"></span>
            </div>
            <ul class="links collapse"
                    id="xs-interfaces-links"
                >
                    <li class="link">
                        <a href="interfaces/OidcDiscoveryDoc.html" data-type="entity-link">OidcDiscoveryDoc</a>
                    </li>
                    <li class="link">
                        <a href="interfaces/ParsedIdToken.html" data-type="entity-link">ParsedIdToken</a>
                    </li>
                    <li class="link">
                        <a href="interfaces/TokenResponse.html" data-type="entity-link">TokenResponse</a>
                    </li>
                    <li class="link">
                        <a href="interfaces/UserInfo.html" data-type="entity-link">UserInfo</a>
                    </li>
                    <li class="link">
                        <a href="interfaces/ValidationParams.html" data-type="entity-link">ValidationParams</a>
                    </li>
            </ul>
        </li>


        <li class="chapter">
            <div class="simple menu-toggler" data-toggle="collapse"
                    data-target="#xs-miscellaneous-links"
                >
                <span class="fa fa-fw fa-cubes"></span>
                <span>Miscellaneous</span>
                <span class="fa fa-angle-down"></span>
            </div>
            <ul class="links collapse"
                    id="xs-miscellaneous-links"
                >
                    <li class="link">
                      <a href="miscellaneous/functions.html" data-type="entity-link">Functions</a>
                    </li>
                    <li class="link">
                      <a href="miscellaneous/typealiases.html" data-type="entity-link">Type aliases</a>
                    </li>
                    <li class="link">
                      <a href="miscellaneous/variables.html" data-type="entity-link">Variables</a>
                    </li>
            </ul>
        </li>




    </ul>

</nav>
        </div>

        <div class="container-fluid main">
           <div class="row main">
               <div class="hidden-xs menu">
                   <nav>

    <ul class="list">

        <li class="title">
            <a href="index.html" data-type="index-link">angular-oauth2-oidc</a>
        </li>

        <li class="divider"></li>

            <div id="book-search-input" role="search">
    <input type="text" placeholder="Type to search">
</div>

        <li class="chapter">
            <a data-type="chapter-link" href="index.html"><span class="fa fa-home"></span>Getting started</a>
            <ul class="links">
                    <li class="link">
                        <a 
                            
                             href="overview.html" 
                             href="overview.html" 
                            data-type="chapter-link">
                            <span class="fa fa-fw fa-th"></span>Overview
                        </a>
                    </li>
                    <li class="link">
                      <a href="index.html" data-type="chapter-link"><span class="fa fa-file-text-o"></span>README</a>
                    </li>
                    <li class="link">
                            <a href="changelog.html"
                        data-type="chapter-link">
                            <span class="fa fa-fw fa-file-text-o"></span>CHANGELOG
                        </a>
                    </li>
                    <li class="link">
                        <a href="dependencies.html"
                            data-type="chapter-link">
                            <span class="fa fa-fw fa-list"></span>Dependencies
                        </a>
                    </li>
            </ul>
        </li>

        <li class="chapter">
            <div class="simple menu-toggler" data-toggle="collapse"
                    data-target="#additional-pages"
>
                <span class="fa fa-fw fa-book"></span>
                <span>Additional documentation</span>
                <span class="fa fa-angle-down"></span>
            </div>
            <ul class="links collapse"
                    id="additional-pages"
>
                    <li class="link ">
                        <a href="additional-documentation/getting-started.html" data-type="entity-link" data-context-id="additional">Getting Started</a>
                    </li>
                    <li class="link ">
                        <a href="additional-documentation/preserving-state-(like-the-requested-url).html" data-type="entity-link" data-context-id="additional">Preserving State (like the Requested URL)</a>
                    </li>
                    <li class="link ">
                        <a href="additional-documentation/refreshing-a-token-(silent-refresh).html" data-type="entity-link" data-context-id="additional">Refreshing a Token (Silent Refresh)</a>
                    </li>
                    <li class="link ">
                        <a href="additional-documentation/working-with-httpinterceptors.html" data-type="entity-link" data-context-id="additional">Working with HttpInterceptors</a>
                    </li>
                    <li class="link ">
                        <a href="additional-documentation/callback-after-login.html" data-type="entity-link" data-context-id="additional">Callback after login</a>
                    </li>
                    <li class="link ">
                        <a href="additional-documentation/custom-query-parameters.html" data-type="entity-link" data-context-id="additional">Custom Query Parameters</a>
                    </li>
                    <li class="link ">
                        <a href="additional-documentation/events.html" data-type="entity-link" data-context-id="additional">Events</a>
                    </li>
                    <li class="link ">
                        <a href="additional-documentation/routing-with-the-hashstrategy.html" data-type="entity-link" data-context-id="additional">Routing with the HashStrategy</a>
                    </li>
                    <li class="link ">
                        <a href="additional-documentation/adapt-id_token-validation.html" data-type="entity-link" data-context-id="additional">Adapt id_token Validation</a>
                    </li>
                    <li class="link ">
                        <a href="additional-documentation/session-checks.html" data-type="entity-link" data-context-id="additional">Session Checks</a>
                    </li>
                    <li class="link ">
                        <a href="additional-documentation/server-side-rendering.html" data-type="entity-link" data-context-id="additional">Server Side Rendering</a>
                    </li>
                    <li class="link ">
                        <a href="additional-documentation/configure-library-for-implicit-flow-without-discovery-document.html" data-type="entity-link" data-context-id="additional">Configure Library for Implicit Flow without discovery document</a>
                    </li>
                    <li class="link ">
                        <a href="additional-documentation/using-systemjs.html" data-type="entity-link" data-context-id="additional">Using SystemJS</a>
                    </li>
                    <li class="link ">
                        <a href="additional-documentation/original-config-api.html" data-type="entity-link" data-context-id="additional">Original Config API</a>
                    </li>
                    <li class="link ">
                        <a href="additional-documentation/using-password-flow.html" data-type="entity-link" data-context-id="additional">Using Password Flow</a>
                    </li>
            </ul>
        </li>

        <li class="chapter modules">
            <a data-type="chapter-link" href="modules.html">
                <div class="menu-toggler linked" data-toggle="collapse"
                        data-target="#modules-links"
                >
                    <span class="fa fa-fw fa-archive"></span>
                    <span class="link-name">Modules</span>
                    <span class="fa fa-angle-down"></span>
                </div>
            </a>
            <ul class="links collapse"
                    id="modules-links"
>
                    <li class="link">
                        <a href="modules/OAuthModule.html" data-type="entity-link">OAuthModule</a>
                    </li>
            </ul>
        </li>



        <li class="chapter">
            <div class="simple menu-toggler" data-toggle="collapse"
                    data-target="#classes-links"
>
                <span class="fa fa-fw fa-file-code-o"></span>
                <span>Classes</span>
                <span class="fa fa-angle-down"></span>
            </div>
            <ul class="links collapse"
                    id="classes-links"
>
                    <li class="link">
                        <a href="classes/AbstractValidationHandler.html" data-type="entity-link">AbstractValidationHandler</a>
                    </li>
                    <li class="link">
                        <a href="classes/AuthConfig.html" data-type="entity-link">AuthConfig</a>
                    </li>
                    <li class="link">
                        <a href="classes/JwksValidationHandler.html" data-type="entity-link">JwksValidationHandler</a>
                    </li>
                    <li class="link">
                        <a href="classes/LoginOptions.html" data-type="entity-link">LoginOptions</a>
                    </li>
                    <li class="link">
                        <a href="classes/NullValidationHandler.html" data-type="entity-link">NullValidationHandler</a>
                    </li>
                    <li class="link">
                        <a href="classes/OAuthErrorEvent.html" data-type="entity-link">OAuthErrorEvent</a>
                    </li>
                    <li class="link">
                        <a href="classes/OAuthEvent.html" data-type="entity-link">OAuthEvent</a>
                    </li>
                    <li class="link">
                        <a href="classes/OAuthInfoEvent.html" data-type="entity-link">OAuthInfoEvent</a>
                    </li>
                    <li class="link">
                        <a href="classes/OAuthModuleConfig.html" data-type="entity-link">OAuthModuleConfig</a>
                    </li>
                    <li class="link">
                        <a href="classes/OAuthNoopResourceServerErrorHandler.html" data-type="entity-link">OAuthNoopResourceServerErrorHandler</a>
                    </li>
                    <li class="link">
                        <a href="classes/OAuthResourceServerConfig.html" data-type="entity-link">OAuthResourceServerConfig</a>
                    </li>
                    <li class="link">
                        <a href="classes/OAuthResourceServerErrorHandler.html" data-type="entity-link">OAuthResourceServerErrorHandler</a>
                    </li>
                    <li class="link">
                        <a href="classes/OAuthStorage.html" data-type="entity-link">OAuthStorage</a>
                    </li>
                    <li class="link">
                        <a href="classes/OAuthSuccessEvent.html" data-type="entity-link">OAuthSuccessEvent</a>
                    </li>
                    <li class="link">
                        <a href="classes/ReceivedTokens.html" data-type="entity-link">ReceivedTokens</a>
                    </li>
                    <li class="link">
                        <a href="classes/ValidationHandler.html" data-type="entity-link">ValidationHandler</a>
                    </li>
                    <li class="link">
                        <a href="classes/WebHttpUrlEncodingCodec.html" data-type="entity-link">WebHttpUrlEncodingCodec</a>
                    </li>
            </ul>
        </li>

                <li class="chapter">
                    <div class="simple menu-toggler" data-toggle="collapse"
                            data-target="#injectables-links"
>
                        <span class="fa fa-fw fa-long-arrow-down"></span>
                        <span>Injectables</span>
                        <span class="fa fa-angle-down"></span>
                    </div>
                    <ul class="links collapse"
                            id="injectables-links"
>
                            <li class="link">
                                <a href="injectables/OAuthService.html" data-type="entity-link">OAuthService</a>
                            </li>
                            <li class="link">
                                <a href="injectables/UrlHelperService.html" data-type="entity-link">UrlHelperService</a>
                            </li>
                    </ul>
                </li>

        <li class="chapter">
            <div class="simple menu-toggler" data-toggle="collapse"
                    data-target="#interceptors-links"
>
                <span class="fa fa-fw fa-exchange"></span>
                <span>Interceptors</span>
                <span class="fa fa-angle-down"></span>
            </div>
            <ul class="links collapse"
                    id="interceptors-links"
>
                    <li class="link">
                        <a href="interceptors/DefaultOAuthInterceptor.html" data-type="entity-link">DefaultOAuthInterceptor</a>
                    </li>
            </ul>
        </li>

        <li class="chapter">
            <div class="simple menu-toggler" data-toggle="collapse"
                    data-target="#interfaces-links"
>
                <span class="fa fa-fw fa-info"></span>
                <span>Interfaces</span>
                <span class="fa fa-angle-down"></span>
            </div>
            <ul class="links collapse"
                    id="interfaces-links"
>
                    <li class="link">
                        <a href="interfaces/OidcDiscoveryDoc.html" data-type="entity-link">OidcDiscoveryDoc</a>
                    </li>
                    <li class="link">
                        <a href="interfaces/ParsedIdToken.html" data-type="entity-link">ParsedIdToken</a>
                    </li>
                    <li class="link">
                        <a href="interfaces/TokenResponse.html" data-type="entity-link">TokenResponse</a>
                    </li>
                    <li class="link">
                        <a href="interfaces/UserInfo.html" data-type="entity-link">UserInfo</a>
                    </li>
                    <li class="link">
                        <a href="interfaces/ValidationParams.html" data-type="entity-link">ValidationParams</a>
                    </li>
            </ul>
        </li>


        <li class="chapter">
            <div class="simple menu-toggler" data-toggle="collapse"
                    data-target="#miscellaneous-links"
>
                <span class="fa fa-fw fa-cubes"></span>
                <span>Miscellaneous</span>
                <span class="fa fa-angle-down"></span>
            </div>
            <ul class="links collapse"
                    id="miscellaneous-links"
>
                    <li class="link">
                      <a href="miscellaneous/functions.html" data-type="entity-link">Functions</a>
                    </li>
                    <li class="link">
                      <a href="miscellaneous/typealiases.html" data-type="entity-link">Type aliases</a>
                    </li>
                    <li class="link">
                      <a href="miscellaneous/variables.html" data-type="entity-link">Variables</a>
                    </li>
            </ul>
        </li>




    </ul>

</nav>
               </div>
               <!-- START CONTENT -->
               <div class="content additional-page">
                   <div class="content-data">















<h1 id="refreshing-a-token-when-using-implicit-flow-silent-refresh-">Refreshing a Token when using Implicit Flow (Silent Refresh)</h1>
<p>To refresh your tokens when using implicit flow you can use a silent refresh. This is a well-known solution that compensates the fact that implicit flow does not allow for issuing a refresh token. It uses a hidden iframe to get another token from the auth-server. When the user is there still logged in (by using a cookie) it will respond without user interaction and provide new tokens.</p>
<p>To use this approach, setup a redirect uri for the silent refresh.</p>
<p>For this, you can set the property silentRefreshRedirectUri in the config object:</p>
<pre class="line-numbers"><code class="language-TypeScript">// This api will come in the next version

import { AuthConfig } from &#39;angular-oauth2-oidc&#39;;

export const authConfig: AuthConfig = {

  // Url of the Identity Provider
  issuer: &#39;https://steyer-identity-server.azurewebsites.net/identity&#39;,

  // URL of the SPA to redirect the user to after login
  redirectUri: window.location.origin + &#39;/index.html&#39;,

  // URL of the SPA to redirect the user after silent refresh
  silentRefreshRedirectUri: window.location.origin + &#39;/silent-refresh.html&#39;,

  // The SPA&#39;s id. The SPA is registerd with this id at the auth-server
  clientId: &#39;spa-demo&#39;,

  // set the scope for the permissions the client should request
  // The first three are defined by OIDC. The 4th is a usecase-specific one
  scope: &#39;openid profile email voucher&#39;,
}</code></pre><p>As an alternative, you can set the same property directly with the OAuthService:</p>
<pre class="line-numbers"><code class="language-TypeScript">this.oauthService.silentRefreshRedirectUri = window.location.origin + &quot;/silent-refresh.html&quot;;</code></pre><p>Please keep in mind that this uri has to be configured at the auth-server too.</p>
<p>This file is loaded into the hidden iframe after getting new tokens. Its only task is to send the received tokens to the main application:</p>
<pre class="line-numbers"><code class="language-HTML">&lt;html&gt;
&lt;body&gt;
    &lt;script&gt;
    parent.postMessage(location.hash, location.origin);
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre><p>Please make sure that this file is copied to your output directory by your build task. When using the CLI you can define it as an asset for this. For this, you have to add the following line to the file <code>.angular-cli.json</code>:</p>
<pre class="line-numbers"><code class="language-JSON">&quot;assets&quot;: [
    [...],
    &quot;silent-refresh.html&quot;
],</code></pre><p>To perform a silent refresh, just call the following method:</p>
<pre class="line-numbers"><code class="language-TypeScript">this
    .oauthService
    .silentRefresh()
    .then(info =&gt; console.debug(&#39;refresh ok&#39;, info))
    .catch(err =&gt; console.error(&#39;refresh error&#39;, err));</code></pre><p>When there is an error in the iframe that prevents the communication with the main application, silentRefresh will give you a timeout. To configure the timespan for this, you can set the property <code>silentRefreshTimeout</code> (msec). The default value is 20.000 (20 seconds).</p>
<h3 id="automatically-refreshing-a-token-when-before-it-expires">Automatically refreshing a token when/ before it expires</h3>
<p>To automatically refresh a token when/ some time before it expires, just call the following method after configuring the OAuthService:</p>
<pre class="line-numbers"><code class="language-TypeScript">this.oauthService.setupAutomaticSilentRefresh();</code></pre><p>By default, this event is fired after 75% of the token&#39;s life time is over. You can adjust this factor by setting the property <code>timeoutFactor</code> to a value between 0 and 1. For instance, 0.5 means, that the event is fired after half of the life time is over and 0.33 triggers the event after a third.</p>

                   </div><div class="search-results">
    <div class="has-results">
        <h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
        <ul class="search-results-list"></ul>
    </div>
    <div class="no-results">
        <h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
    </div>
</div>
</div>
               <!-- END CONTENT -->
           </div>
       </div>

       <script src="../js/libs/bootstrap-native.js"></script>

       <script src="../js/libs/es6-shim.min.js"></script>
       <script src="../js/libs/EventDispatcher.js"></script>
       <script src="../js/libs/promise.min.js"></script>
       <script src="../js/libs/zepto.min.js"></script>

       <script src="../js/compodoc.js"></script>

        <script>
            var COMPODOC_CURRENT_PAGE_DEPTH = 1;
            var COMPODOC_CURRENT_PAGE_URL = 'refreshing-a-token-(silent-refresh).html';
        </script>

       <script src="../js/search/search.js"></script>
       <script src="../js/search/lunr.min.js"></script>
       <script src="../js/search/search-lunr.js"></script>

       <script src="../js/tabs.js"></script>
       <script src="../js/menu.js"></script>
       <script src="../js/libs/prism.js"></script>
       <script src="../js/sourceCode.js"></script>
       <script src="../js/search/search_index.js"></script>


    </body>
</html>
